import React from 'react';
import {LaptopOutlined, NotificationOutlined, UserOutlined} from '@ant-design/icons';
import {Breadcrumb, Layout, Menu, theme} from 'antd';
import './styles/index.css'
import {Routes, Route, useNavigate} from 'react-router-dom';
import routes from './router/routes';


const {Header, Footer, Sider} = Layout;
const items1 = ['1', '2', '3'].map(key => ({
    key, label: `nav ${key}`,
}));
const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
    const key = String(index + 1);
    return {
        key: `sub${key}`,
        icon: React.createElement(icon),
        label: `subnav ${key}`,
        children: Array.from({length: 4}).map((_, j) => {
            const subKey = j + 1;
            return {
                key: subKey, label: `option${subKey}`,
            };
        }),
    };
});

const App = () => {
    // console.log(useNavigate)

    const navigate = useNavigate();
    const goRouter = ((e) => {
        //    路由跳转，帮我写
        console.log(e)
        const numberKey = Number(e.key)
        if (numberKey % 2) {
            navigate('/about')
        } else {
            navigate('/')
        }
    })

    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();
    return (<Layout style={{padding: 0, height: '100%'}}>
        <Header style={{display: 'flex', alignItems: 'center'}}>
            <div className="demo-logo"/>
            <Menu
                theme="dark"
                mode="horizontal"
                defaultSelectedKeys={['2']}
                items={items1}
                onClick={goRouter}
                style={{flex: 1, minWidth: 0}}
            />
        </Header>
        <div style={{
            backgroundColor: '#f6f7fa',
            padding: '16px',
            flex: 1,
            display: 'flex',
            flexDirection: 'column'
        }}>
            <Breadcrumb
                style={{backgroundColor: colorBgContainer,padding: '16px'}}
                items={[{title: 'Home'}, {title: 'List'}, {title: 'App'}]}
            />
            <Layout
                style={{padding: '0 0', flex: 1, background: colorBgContainer, borderRadius: borderRadiusLG}}
            >
                <Sider style={{background: colorBgContainer}} width={200}>
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={{height: '100%'}}
                        items={items2}
                        onClick={goRouter}
                    />
                </Sider>
                <Routes>
                    {
                        routes.map((router, index) => {
                            return (<Route key={index} path={router.path} element={router.element}/>)

                        })
                    }
                </Routes>

            </Layout>
            <Footer style={{backgroundColor: colorBgContainer, textAlign: 'center'}}>
                Ant Design ©{new Date().getFullYear()} Created by Ant UED
            </Footer>
        </div>

    </Layout>);
};

export default App;